<template>
    <div class="Ran_box">
      <div class="vs-hed">
        <div class="vs-d1">
          <div class="d1-css">
            <p>当前票数</p>
            <p>{{vote}}</p>
          </div>
          <div class="d1-css">
            <p>当前排名</p>
            <p>{{rank}}</p>
          </div>
        </div>
        <p>距离活动结束</p>
        <ul class="ulcount">
          <li v-for="(item,index) in timeData" :key="index">
            <p>{{item.dy}}</p>
            <p>{{item.txt}}</p>
          </li>
        </ul>
      </div>
      <div class="rank-cont">
        <img :src="avatar" alt="加载失败">
        <p>{{signature}}</p>
        <!--<div class="rank-hed">-->
           <!--<img :src="avatar" alt="">-->
           <!--<div class="hed-right">-->
             <!--<p><span>{{nickname}}</span> <img :src="sex==1?'./static/lyl/men.png':'./static/lyl/woman.png'" alt=""></p>-->
             <!--<p>{{signature}}</p>-->
           <!--</div>-->
         <!--</div>-->
        <!--&lt;!&ndash;<p class="p1">本人徐三岁，从小对跳舞有特殊的感觉，非常热爱跳舞， 从小学四年级就开始报培训班。</p>&ndash;&gt;-->
        <!--<p class="p2">演出节目</p>-->
        <!--<div class="rank-fot" v-for="(item,index) in shoData" :key="index">-->
          <!--<img :src="item.img" alt="">-->
          <!--<div class="fot-right">-->
            <!--<p>{{item.name}}</p>-->
            <!--<p>{{item.introduce}}</p>-->
            <!--<p>-->
              <!--<img :src="'./static/lyl/time.png'" alt="">-->
              <!--<span>{{item.create_time}}</span>-->
              <!--<img :src="'./static/lyl/loke.png'" alt="">-->
              <!--<span>{{item.play}}</span>-->
            <!--</p>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div class="rank-footer">
        <button @click="votesuc()">{{vote_status==0?'投票':'已投票'}}</button>
      </div>

      <ul class="ul2">
        <li v-for="(item,index) in data" :key="index">
          <router-link :to="item.path" :class="$route.params.id2==index || $route.query.ishow==index?'acti':''">
            {{item.txt}}<p v-if="$route.params.id2==index || $route.query.ishow==index"></p>
          </router-link>
        </li>
      </ul>
    </div>
</template>

<script>
  import * as list from "../../../api/list.js";
  import {Dialog} from 'vant';
    export default {
      name: "Rankshow",
      data(){
        return {
          data:[
            {path:'/vote/4/showout/0/'+this.$route.params.id3,txt:'首页'},
            {path:'/vote/4/ranking/1/'+this.$route.params.id3,txt:'人气排行'},
            {path:'/vote/4/voting/2/'+this.$route.params.id3,txt:'投票说明'}
          ],
          day:0,
          hour:0,
          minete:0,
          secnd:0,
          vote:'',
          rank:'',
          avatar:'',
          nickname:'',
          signature:'',
          year:'',
          month:'',
          day2:'',
          sex:'',
          shoData:[],
          vote_status:''
        }
      },
      beforeMount(){
        let parmes5 = {
          active_id:this.$route.params.id3,
          id:this.$route.params.id2,
          user_id:this.$store.state.user_id
        };
        list.manDetail(parmes5).then(res=>{
          console.log('人气详情',res);
          this.vote = res.data.vote;
          this.rank = res.data.rank;
          this.year = res.data.year;
          this.month = res.data.month;
          this.day2 = res.data.day;
          this.avatar = res.data.avatar;
          this.nickname = res.data.nickname;
          this.signature = res.data.signature;
          this.sex = res.data.sex;
          this.shoData = res.data.program;
          this.vote_status = res.data.vote_status;
        })
      },
      mounted(){
        setInterval(function () {
          var date = new Date();
          var date2 = new Date(this.year,this.month-1,this.day2,23,59,59);
          var s = date2 - date;
          this.day = parseInt(s/1000/60/60/24);
          s-=this.day*24*60*60*1000;
          this.hour = parseInt(s/1000/60/60);
          s-=this.hour*60*60*1000;
          this.minete = parseInt(s/1000/60);
          s-=this.minete*60*1000;
          this.secnd = parseInt(s/1000);
          this.secnd = formatTime(this.secnd);
          this.minete = formatTime(this.minete);
          this.hour = formatTime(this.hour);
          this.day = formatTime(this.day);
          function formatTime(t){
            return t < 10 ? "0"+t : t;
          }
        }.bind(this),1000)

        mui.back = function() {
          window.history.go(-1);
        }
      },
      computed:{
        timeData(){
          return [
            {dy:this.day,txt:'天'},
            {dy:this.hour,txt:'时'},
            {dy:this.minete,txt:'分'},
            {dy:this.secnd,txt:'秒'}
          ]
        }
      },
      methods:{
        votesuc(){
          if (this.vote_status==0){
            this.$router.push('/manvote/'+this.$route.params.id3+'/'+this.$route.params.id2)
          } else{
            Dialog.alert({
              message: "你已投票，谢谢您的支持"
            });
          }
        }
      }
    }
</script>

<style scoped>
.Ran_box{
  padding-top: 20px;
}
  .vs-hed{
    text-align: center;
    border-bottom: 2px solid #dcdcdc;
    margin-bottom: 20px;
  }
  .vs-hed .vs-d1{
    display: flex;
    justify-content: space-around;
  }
  .vs-hed .vs-d1 .d1-css{
    width: 190px;
    height: 80px;
    border: 2px solid #884ca4;
    border-radius: 10px;
    padding-top: 7px;
  }
  .vs-hed .vs-d1 .d1-css p{
    font-size: 26px;
    color: #884ca4;
  }
  .vs-hed>p{
    font-size: 26px;
    padding: 20px 0;
  }
  .ulcount{
    display: flex;
    justify-content: center;
  }
  .ulcount li{
    margin-right: 36px;
  }
  .ulcount li:last-child{
    margin-right: 0;
  }
  .ulcount li p:nth-child(1){
    width: 60px;
    height: 34px;
    background: #e98345;
    color: #fff;
    font-size: 26px;
  }
  .ulcount li p:nth-child(2){
    font-size: 26px;
    padding: 20px 0;
  }

 .rank-cont{
   text-align: center;
   padding: 20px 40px 60px;
   border-bottom: 2px solid #dcdcdc;
 }
.rank-cont img{
  width: 320px;
  height: 345px;
}
.rank-cont p{
  padding-top: 10px;
  font-size: 24px;
  font-weight: bolder;
}
 /*.rank-cont .rank-hed{*/
   /*display: flex;*/
 /*}*/
 /*.rank-cont .rank-hed>img{*/
   /*width: 100px;*/
   /*height: 100px;*/
   /*margin-right: 20px;*/
 /*}*/
 /*.rank-cont .rank-hed .hed-right p:nth-child(1) span{*/
   /*font-size: 32px;*/
   /*margin-right: 25px;*/
 /*}*/
 /*.rank-cont .rank-hed .hed-right p:nth-child(1) img{*/
   /*width: 30px;*/
   /*height: 30px;*/
 /*}*/
 /*.rank-cont .rank-hed .hed-right p:nth-child(2){*/
   /*font-size: 26px;*/
   /*color: #444;*/
   /*margin-top: 20px;*/
 /*}*/
  /*.rank-cont .p1{*/
    /*border: 2px solid #dcdcdc;*/
    /*padding: 20px;*/
    /*margin: 20px 0;*/
    /*font-size: 24px;*/
    /*color: #444;*/
  /*}*/
 /*.rank-cont .p2{*/
   /*font-size: 28px;*/
   /*padding: 20px 0;*/
 /*}*/
  /*.rank-fot{*/
    /*display: flex;*/
    /*margin-bottom: 20px;*/
  /*}*/
 /*.rank-fot>img{*/
   /*width: 220px;*/
   /*height: 140px;*/
   /*margin-right: 20px;*/
 /*}*/
 /*.rank-fot .fot-right p{*/
   /*padding: 5px 0;*/
 /*}*/
  /*.rank-fot .fot-right p:nth-child(1){*/
    /*font-size: 28px;*/
  /*}*/
 /*.rank-fot .fot-right p:nth-child(2){*/
   /*font-size: 24px;*/
   /*color: #8c8c8c;*/
 /*}*/
 /*.rank-fot .fot-right p:nth-child(3) img{*/
   /*width: 30px;*/
   /*height: 30px;*/
   /*vertical-align: bottom;*/
 /*}*/
 /*.rank-fot .fot-right p:nth-child(3) img:nth-child(3){*/
   /*width: 30px;*/
   /*height: 22px;*/
 /*}*/
 /*.rank-fot .fot-right p:nth-child(3) span{*/
   /*font-size: 24px;*/
   /*color: #8c8c8c;*/
 /*}*/
 .rank-footer{
   padding: 20px 40px;
 }
 .rank-footer button{
   width: 100%;
   height: 80px;
   background: #884ca4;
   font-size: 36px;
   color: #fff;
   border-radius: 10px;
 }
  .ul2{
    display: flex;
    justify-content: space-between;
  }
  .ul2 li{
    position: relative;
    flex-grow: 1;
    font-size: 26px;
    border-right: 1px solid #444;
    text-align: center;
  }
.ul2 .acti{
  color: #884ca4;
}
  .ul2 li p{
    position: absolute;
    left: 50%;
    margin-left: -52px;
    bottom: -20px;
    width: 104px;
    border: 4px solid #884ca4;
  }
  .ul2 li:last-child{
    border: none;
  }
</style>
